<template>
  <component
    :is="elName(column)"
    v-model="data"
    v-bind="elProps(column)"
    class="filter-item"
    v-on="elEventHandlers(column)"
  />
</template>

<script>
import ColumnType from '@/framework/constant/ColumnType'
import DateType from '@/framework/constant/DateType'
import Selector from '@/framework/components/Selector'
import Cascader from '@/framework/components/Cascader'
import NumberRange from '@/framework/components/NumberRange'
import {dateRangePickerOptions} from '@/framework/constant/DatePickerOptions'

export default {
  name: 'SearchColumnRender',
  components: {
    Selector, Cascader,
    NumberRange
  },
  data() {
    return {
      data: this.value,
      ColumnType
    }
  },
  watch: {
    value() {
      this.data = this.value
    },
    data() {
      this.$emit('input', this.data)
    }
  },
  props: {
    column: {
      type: Object,
      default: null
    },
    value: {
      type: [Object, String, Number, Array],
      default: null
    }
  },
  methods: {
    elName(col) {
      if (col.type === ColumnType.CHECK) {
        return 'el-checkbox'
      }
      if (col.type === ColumnType.DATE) {
        return 'el-date-picker'
      } else if (col.type === ColumnType.TIME) {
        return 'el-time-select'
      } else if (col.type === ColumnType.DATETIME) {
        return 'el-date-picker'
      } else if (col.type === ColumnType.NUMBER) {
        return 'number-range'
      } else if (col.type === ColumnType.CASCADER) {
        return 'cascader'
      } else if (col.type === ColumnType.SELECT || col.type === ColumnType.RADIO) {
        return 'selector'
      }
      if (col.autocomplete) {
        return 'el-autocomplete'
      }
      return 'el-input'
    },
    elEventHandlers(col) {
      const result = {}
      if (col.type === ColumnType.DATETIME || col.type === ColumnType.SELECT || col.type === ColumnType.RADIO || col.type === ColumnType.CHECK) {
        result.change = (value) => {
          if (col.type === ColumnType.SELECT || col.type === ColumnType.RADIO) {
            value = value.value
          }
          // debugger
          this.$emit('change', value)
        }
      }
      return result
    },
    elProps(col) {
      const result = {}
      result.size = 'mini'
      if (col.type === ColumnType.SELECT || col.type === ColumnType.RADIO) {
        result.options = col.options
      } else if (col.type === ColumnType.CASCADER) {
        result.options = col.options
        if (col.props) {
          result.props = col.props
        }
      } else if (col.type === ColumnType.TIME) {
        // result.type = DateType.TIME
        result.valueFormat = 'HH:mm'
        result.pickerOptions = {
          start: '06:30',
          step: '00:15',
          end: '23:30'
        }
      } else if (col.type === ColumnType.DATE) {
        result.type = DateType.DATE
        result.valueFormat = 'yyyy-MM-dd'
      } else if (col.type === ColumnType.NUMBER) {
        result.controls = false
        if ('precision' in col) {
          result.precision = col.precision
        }
      } else if (col.type === ColumnType.DATETIME) {
        result.type = DateType.DATERANGE
        // result.type = DateType.DATETIMERANGE
        // result.valueFormat = 'yyyy-MM-dd HH:mm:ss'
        result.valueFormat = 'yyyy-MM-dd'
      }
      if (col.autocomplete) {
        result.fetchSuggestions = col.autocomplete
      }
      result.placeholder = col.label
      result.clearable = true
      // console.log(result)
      if (col.searchOption && col.searchOption.options) {
        Object.assign(result, col.searchOption.options)
      }
      if (result.type === DateType.DATETIMERANGE || result.type === DateType.DATERANGE) {
        result.startPlaceholder = result.type === DateType.DATERANGE ? '开始日期' : '开始时间'
        result.endPlaceholder = result.type === DateType.DATERANGE ? '结束日期' : '结束时间'
        result.style = {
          width: result.type === DateType.DATERANGE ? '240px' : '350px'
        }
        result.pickerOptions = dateRangePickerOptions
      }

      return result
    }
  }
}
</script>

<style scoped>

</style>
